import React, { useState } from 'react';
import { Form, Radio } from 'antd';
import styled from '@emotion/styled';

interface SummaryRadioProps {
    name: string;
    label: string;
    required: boolean;
    options: string[];
    onChange: (value: string) => void;
}

// 定义组件的样式
const RadioItem = styled(Radio)`
    .ant-radio-inner {
        background-color: #fff;
    }
`;
const SummaryRadio = (props: SummaryRadioProps) => {
    const { name, label, required, options, onChange } = props;
    const [radio, setRadio] = useState('');

    const handleChange = (e: any) => {
        setRadio(e.target.value);
        onChange(e.target.value);
    };

    return (
        <div className="summary-radio-container">

            <Form.Item label={label} name={name} required={required} rules={[{ required: required, message: `请选择${label}` }]}>
                <Radio.Group value={radio} onChange={handleChange}>
                    {options.map((item, idx) => (
                        <RadioItem key={idx} value={item}>{item}</RadioItem>
                    ))}
                </Radio.Group>
            </Form.Item>
        </div>
    );
};

export default SummaryRadio;